<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
	<title>v-on指令</title>
</head>
<body>
	<div id="app">
		<table border="1">
			<thead>
				<th>学科</th>
				<th>分数</th>
			</thead>
			<tbody>
				<tr>
					<td>数学</td>
					<td><input type="text" v-model.number='math'></td>
				</tr>
				<tr>
					<td>物理</td>
					<td><input type="text" v-model.number='physics'></td>
				</tr>
				<tr>
					<td>英语</td>
					<td><input type="text" v-model.number='english'></td>
				</tr>
				<tr>
					<td>总分</td>
					<!-- <td>{{math + physics + english}}</td> -->
					<td>{{sum}}</td>
				</tr>
				<tr>
					<td>平均分</td>
					<!-- <td>{{Math.round((math + physics + english) / 3)}}</td> -->
					<td>{{average}}</td>
				</tr>
			</tbody>
		</table>
	</div>

	<!--
	计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。较methods方法调用函数来说性能优化一点
	-->

	<script src="../resource/lib/vue.js"></script>
	<script src="../resource/js/count.js"></script>
</body>
</html>